import React, { Component} from 'react';
import classNames from 'classnames';
import {immutableRenderDecorator} from 'react-immutable-render-mixin';
import CSSModules from 'react-css-modules';
import styles from './tab.module.scss';

@immutableRenderDecorator
@CSSModules(styles, {allowMultiple: true})

class TabContent extends Component {
  getTabPanes () {
    const {activeIndex, panels} = this.props;

    return panels.map(child => {
      if (!child) return;

      const order = parseInt(child.props.order, 10);
      const isActive = activeIndex === order;

      return React.cloneElement(child, {
        isActive,
        children: child.props.children,
        key: `tabpane-${order}`
      });
    });
  }

  render () {
    const classes = classNames({
      content: true
    });

    return (
      <div styleName={classes}>
      {
        this.getTabPanes()
      }
      </div>
    );
  }
}

export default TabContent;